<template>
  <div>
    <ul class="case-main">
      <li v-for="item of NavList"><router-link  :to="item.DiUrl"><img :src="item.imgUrl" alt=""></router-link></li>
    </ul>
  </div>
</template>

<script>
  export default{
    name:'Case',
        data()  {
      return  {
         "NavList": [{
            "id": "0001",
            "imgUrl": "http://m.shhuamei.cn/imgV3/item1.jpg",
            "desc": "经典项目",
            "DiUrl":  ""
          },{
            "id": "0002",
            "imgUrl": "http://m.shhuamei.cn/imgV3/item2.jpg",
            "desc": "美丽相册",
             "DiUrl":  ""
          },{
            "id": "0003",
            "imgUrl": "http://m.shhuamei.cn/imgV3/item3.jpg",
            "desc": "星座馆",
             "DiUrl":  ""
          },{
            "id": "0004",
            "imgUrl": "http://m.shhuamei.cn/imgV3/item4.jpg",
            "desc": "特邀医生",
             "DiUrl":  ""
          },{
            "id": "0005",
            "imgUrl": "http://m.shhuamei.cn/imgV3/item5.jpg",
            "desc": "品牌",
             "DiUrl":  ""
          },{
            "id": "0006",
            "imgUrl": "http://m.shhuamei.cn/imgV3/item6.jpg",
            "desc": "安全/服务",
             "DiUrl":  ""
          },{
            "id": "0007",
            "imgUrl": "http://m.shhuamei.cn/imgV3/item7.jpg",
            "desc": "来院路线",
             "DiUrl":  ""
          },{
            "id": "0008",
            "imgUrl": "http://m.shhuamei.cn/imgV3/item8.jpg",
            "desc": "关于我们",
             "DiUrl":  ""
          }]
        }
    }
  }
</script>

<style>
.case-main{
  padding:0.1rem;
}
  .case-main{
   display:flex;
   flex-wrap:wrap;
   font-size:0;
  }
  .case-main li{
    width:31.489%;
    text-align:center;
    position: relative;
    flex: auto;
  }

  .case-main li img{    width: 96%;

    margin: 0px auto;}
    .case-main li h6{
      font-size:0.14rem;
    color: #7d7d7d;
    line-height: 0.34rem;}
     .case-main li a{
       margin-bottom: 4.25%;
    display: inline-block;

     }
</style>
